<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./css/tail.css">
</head>

<body>
    <div class="Sephora">
        <a href="http://localhost:65535/sifulan.html">
            <p>S&nbsp;E&nbsp;P&nbsp;H&nbsp;O&nbsp;R&nbsp;A</p>
        </a>
    </div>
    <div class="Sephora_s">
        <div class="Sephora_e"></div>
        <div class="Sephora_f">
            <div class="Sephora_d"></div>
            <div class="Sephora_c">
                <p>登录丝芙兰官网</p>
                <input type="text" placeholder="用户名" class="demon" id="sexe" ><span></span>
                <input type="password" placeholder="密码" class="demon" id="sexd">
                <div class="forget">忘记密码？</div>
                <div class="register">登录</div>
                <div class="agreement">
                    <input type="checkbox" id='read_checkbox'>
                    <div class="navcat"><em>已阅读并同意</em>《丝芙兰用户服务协议》和《丝芙兰隐私政策》</div>
                </div>
                <div class="footer_k">
                    <ul>
                        <li><img src="./img/v1.png" alt=""></li>
                        <li><img src="./img/v2.png" alt=""></li>
                        <li><img src="./img/v3.png" alt=""></li>
                    </ul>
                    <div class="charge"> <a href="./register.html">免费注册</a></div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer_sfl">
        <span> </span>
        <ul class="footer_le">
            <li><img src="./img/t3.jpg" alt=""> 沪公网安备 31010602003121号</li>
            <li>ICP备案序号:沪ICP备05026645号-1</li>
            <li>食品经营许可证</li>
            <li>网站使用条款</li>
            <li>严正声明</li>
        </ul>
        <div class="footer_ri">
            本网站隶属于丝芙兰（上海）化妆品销售有限公司（企业法人营业执照）预付卡信息对接唯一标识 : 310101F5201530100309
        </div>
    </div>
    <script>
        let sexe = document.getElementById("sexe")//用户名
        let sexd = document.getElementById("sexd")//密码
        // sexe.oninput = function () {
        //     let str = this.value;
        //     let reg = /^[\u2e80-\u9fff\w\-]{10,20}$/;
        //     let reg_email = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/
        //     if (reg.test(str) || reg_email.test(str)) {
        //         this.nextElementSibling.innerHTML = "规范";
        //     } else {
        //         this.nextElementSibling.innerHTML = "请填写邮箱或手机号!";
        //     }
        // }
        let register = document.querySelector('.register')//类名是register其实是登陆按钮
        register.onclick = function(){
            let username = sexe.value
            let password = sexd.value
            let ajax = new XMLHttpRequest
            ajax.open('get',`http://localhost:65535/login?username=${username}&password=${password}`,true)
            ajax.onload = function(){
                if(ajax.status >= 200 && ajax.status < 300){
                    if(JSON.parse(ajax.response).code == 1 && read_checkbox.checked){
                        // const d = new Date
                        // d.setDate(d.getDate() + 1)
                        document.cookie = `username=${username}`
                        // location.href = 'http://localhost:65535/index.html'
                        location.href = 'http://localhost:65535/sifulan.html'
                    }else{
                        if(username == ''){
                            sexe.nextElementSibling.innerHTML = '请输入用户名'
                        }else if(password == ''){
                            sexe.nextElementSibling.innerHTML = '请输入密码'
                        }else if(!read_checkbox.checked){
                            sexe.nextElementSibling.innerHTML = '请同意用户协议'
                        }else{
                            sexe.nextElementSibling.innerHTML = '用户名或密码错误,请重试'
                        }
                    }
                }
            }
            ajax.send()
        }
    </script>
</body>

</html>